<!--用户中心详情页-->
<template>
  <div class="userDetail">
    <el-breadcrumb separator="/" class="bread-title">
      <el-breadcrumb-item :to="{ path: '/userCenter' }">用户中心</el-breadcrumb-item>
      <el-breadcrumb-item>用户信息</el-breadcrumb-item>
    </el-breadcrumb>
    <p class="title">基础信息</p>
    <div class="users">
      <div class="left">
        <div class="left_item Avatar">
          <span>头像：</span>
          <img v-if="info.headimg" :src="info.headimg" alt />
          <img v-else :src="iamge" alt />
        </div>
        <div class="left_item">
          <span>我的推荐人：</span>
          <span>{{info.invitationPhone}}</span>
        </div>
        <div class="left_item">
          <span>我的推荐码：</span>
          <span>{{info.invitationCode}}</span>
        </div>
        <div class="left_item">
          <span>推荐的用户数：</span>
          <p>
            <span style="display: block;">总数: {{invitationNum + blocInvitationNum}}</span>
            <span style="display: block;">好房APP: {{invitationNum}}</span>
            <span style="display: block;">集团小程序: {{blocInvitationNum}}</span>
          </p>
        </div>
        <div class="left_item">
          <span>注册时间：</span>
          <span>{{createTime}}</span>
        </div>
      </div>
      <div class="right">
        <div class="right_item">
          <span>区域：</span>
          <span>{{info.region}}</span>
        </div>
        <div class="right_item">
          <span>城市：</span>
          <span>{{info.city}}</span>
        </div>
        <div class="right_item">
          <span>用户名：</span>
          <span>{{info.username}}</span>
        </div>
        <div class="right_item">
          <span>姓名：</span>
          <span>{{info.realName}}</span>
        </div>
        <div class="right_item">
          <span>邮箱：</span>
          <span>{{info.email}}</span>
        </div>
        <div class="right_item">
          <span>性别：</span>
          <span>{{iniutSex}}</span>
        </div>
        <div class="right_item">
          <span>出生日期：</span>
          <span>{{info.age}}</span>
        </div>
        <div class="right_item">
          <span>职业：</span>
          <span>{{professions}}</span>
        </div>
        <div class="right_item">
          <span>家庭状况：</span>
          <span>{{familys}}</span>
        </div>
        <div class="right_item">
          <span>居住地：</span>
          <span>{{info.address}}</span>
        </div>
      </div>
    </div>
    <p class="title">其他信息</p>
    <div class="tabs">
      <el-tabs type="card" class="tab-common" v-model="activeName">
        <el-tab-pane label="认证/地址信息" name="address">
          <el-tabs type="card" class="tab-common" v-model="subactiveName" @tab-click="attestation">
            <el-tab-pane label="地址信息" name="address">
              <userTable :tableData="tableData" :col-configs="colConfigs" :form="form">
                <el-table-column align="center" slot="opt" type="index" label="序号" width="50"></el-table-column>
              </userTable>
            </el-tab-pane>
            <el-tab-pane class="subtitle" label="认证/银行卡信息" name="bindingCard">
              <p>证件信息</p>
              <ul>
                <li>客户姓名：{{identity.realName}}</li>
                <li>证件号码：{{identity.identityCardNum}}</li>
              </ul>
              <p>证件照片</p>
              <viewer>
                <img width="300" height="300" :src="identity.identityCardFront" alt />
                <img width="300" height="300" :src="identity.identityCardReverse" alt />
              </viewer>
              <p>银行卡信息</p>
              <el-table border :data="bindingList" style="width: 80%">
                <el-table-column prop="belongToBank" label="开户行"></el-table-column>
                <el-table-column prop="openBranchBank" label="开户支行"></el-table-column>
                <el-table-column prop="bankCardNum" label="收款账号"></el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="客户行为" name="ENROLL">
          <el-tabs
            type="card"
            class="tab-common"
            v-model="subTypeActiveName"
            @tab-click="handleClick"
          >
            <el-tab-pane label="客户报名" name="ENROLL">
              <userTable
                :tableData="customerData"
                :col-configs="customerConfigs"
                :form="customerForm"
              >
                <el-table-column align="center" slot="opt" type="index" label="序号" width="50"></el-table-column>
              </userTable>
            </el-tab-pane>
            <el-tab-pane label="我要买房" name="IBUYHOUSE">
              <userTable
                :tableData="customerData"
                :col-configs="customerConfigs"
                :form="customerForm"
              >
                <el-table-column align="center" slot="opt" type="index" label="序号" width="50"></el-table-column>
              </userTable>
            </el-tab-pane>
            <el-tab-pane label="IM聊天" name="IM">
              <userTable
                :tableData="customerData"
                :col-configs="customerConfigs"
                :form="customerForm"
              >
                <el-table-column align="center" slot="opt" type="index" label="序号" width="50"></el-table-column>
              </userTable>
            </el-tab-pane>
            <el-tab-pane label="打电话" name="CALL">
              <userTable
                :tableData="customerData"
                :col-configs="customerConfigs"
                :form="customerForm"
              >
                <el-table-column align="center" slot="opt" type="index" label="序号" width="50"></el-table-column>
              </userTable>
            </el-tab-pane>
            <el-tab-pane label="预约看房" name="LOOK">
              <userTable
                :tableData="customerData"
                :col-configs="customerConfigs"
                :form="customerForm"
              >
                <el-table-column align="center" slot="opt" type="index" label="序号" width="50"></el-table-column>
              </userTable>
            </el-tab-pane>
            <el-tab-pane label="客户收藏" name="FAVORITE">
              <userTable
                :tableData="customerData"
                :col-configs="customerConfigs"
                :form="customerForm"
              >
                <el-table-column align="center" slot="opt" type="index" label="序号" width="50"></el-table-column>
              </userTable>
            </el-tab-pane>
            <el-tab-pane label="积分行为" name="point">
              <el-tabs class="tab-common" v-model="integral" type="card" @tab-click="handlePoint">
                <el-tab-pane label="好房" name="GoodRoom">
                  <userTable
                    :tableData="customerData"
                    :col-configs="customerConfigs"
                    :form="customerForm"
                  >
                    <el-table-column align="center" slot="opt" type="index" label="序号" width="50"></el-table-column>
                  </userTable>
                </el-tab-pane>
                <el-tab-pane label="小程序" name="smallRoutine">
                  <el-table :data="customerData" border style="width: 100%">
                    <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
                    <el-table-column align="center" prop="behavior_name" label="积分类型"></el-table-column>
                    <el-table-column align="center" prop="behavior_name" label="积分名称"></el-table-column>
                    <el-table-column align="center" prop="balance_point" label="积分"></el-table-column>
                    <el-table-column align="center" :formatter="time" prop="time" label="时间"></el-table-column>
                  </el-table>
                </el-tab-pane>
              </el-tabs>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import api from "@/api/apiPath";
import utils from "@/common/utils";
import icons from "../../../assets/icon/user.png";
import userTable from "../userCenter/components/userTable";
export default {
  components: {
    userTable
  },
  data() {
    return {
      iamge: icons,
      activeName: "address",
      subactiveName: "address",
      subTypeActiveName: "ENROLL",
      integral: "GoodRoom",
      info: {},
      invitationNum: 0, // 好房app
      blocInvitationNum: 0, // 集团小程序
      tableData: [],
      bindingList: [], // 银行卡信息列表
      customerData: [],
      customerForm: {
        pageNum: 1,
        pageSize: 10,
        source: "" // 空是好房积分， 1是小程序积分
      },
      identity: {},
      form: {
        pageNum: 1,
        pageSize: 10,
        type: "address",
        id: ""
      },
      userCode: "",
      behaviorType: "ENROLL",
      colConfigs: [
        { slot: "opt", message: "message" },
        { prop: "userName", label: "收件人" },
        { prop: "phoneNum", label: "电话" },
        { prop: "imgNum", label: "地址" }
      ],
      customerConfigs: [
        { slot: "opt", message: "message" },
        { prop: "actionName", label: "行为" },
        { prop: "serviceName", label: "楼盘" },
        { prop: "actionStartTime", label: "时间" }
      ]
    };
  },
  computed: {
    createTime() {
      return utils.getTimeString(this.info.createtime);
    },
    iniutSex() {
      let str = "";
      if (this.info.sex == -1) {
        str = "企业主管";
      } else if (this.info.sex == 0) {
        str = "男";
      } else if (this.info.sex == 1) {
        str = "女";
      } else if (this.info.sex == 2) {
        str = "其他";
      }
      return str;
    },
    professions() {
      let str = "";
      if (this.info.profession == 1) {
        str = "企业主管";
      } else if (this.info.profession == 2) {
        str = "企业经理";
      } else if (this.info.profession == 3) {
        str = "机关事业单位";
      } else if (this.info.profession == 4) {
        str = "自由职业者";
      } else if (this.info.profession == 5) {
        str = "一般雇员";
      }
      return str;
    },
    familys() {
      let str = "";
      if (this.info.family == 1) {
        str = "已婚无小孩";
      } else if (this.info.family == 2) {
        str = "已婚有小孩";
      } else if (this.info.family == 3) {
        str = "已婚有小孩和老人";
      } else if (this.info.family == 4) {
        str = "其他";
      } else if (this.info.family == 5) {
        str = "未婚";
      }
      return str;
    }
  },
  methods: {
    handlePoint(tab) {
      if (tab.name == "GoodRoom") {
        this.customerForm.source = "";
      } else {
        this.customerForm.source = 1;
      }
      this.pointList();
    },
    // 小程序积分明细
    pointList() {
      this.axios
        .post(`${api.pointList}${this.userCode}`, this.customerForm)
        .then(res => {
          if (res.data.code === 200) {
            let list = res.data.data.point_details[0];
            if (list) {
              this.customerData = list.detail;
            }
          }
        });
    },
    handleClick(tab) {
      this.behaviorType = tab.name;
      if (this.behaviorType == "ENROLL") {
        this.customerConfigs = [
          { slot: "opt", message: "message" },
          { prop: "actionName", label: "行为" },
          { prop: "serviceName", label: "楼盘" },
          { prop: "actionStartTime", label: "时间" }
        ];
      } else if (this.behaviorType == "IBUYHOUSE") {
        this.customerConfigs = [
          { slot: "opt", message: "message" },
          { prop: "city", label: "购房城市" },
          { prop: "budget", label: "购房预算" },
          { prop: "ioan", label: "是否考虑贷款" },
          { prop: "serviceName", label: "居室要求" },
          { prop: "serviceName", label: "意向楼盘" },
          { prop: "actionStartTime", label: "发起时间" }
        ];
      } else if (this.behaviorType == "IM") {
        this.customerConfigs = [
          { slot: "opt", message: "message" },
          { prop: "actionName", label: "行为" },
          { prop: "userName", label: "聊天人" },
          { prop: "duration", label: "时长" },
          { prop: "serviceName", label: "发起楼盘" },
          { prop: "actionStartTime", label: "发起时间" }
        ];
      } else if (this.behaviorType == "CALL") {
        this.customerConfigs = [
          { slot: "opt", message: "message" },
          { prop: "actionName", label: "行为" },
          { prop: "userName", label: "接听人" },
          { prop: "serviceName", label: "发起楼盘" },
          { prop: "actionStartTime", label: "发起时间" }
        ];
      } else if (this.behaviorType == "LOOK") {
        this.customerConfigs = [
          { slot: "opt", message: "message" },
          { prop: "actionName", label: "行为" },
          { prop: "actionEndTime", label: "看房时间" },
          { prop: "serviceName", label: "预约楼盘" },
          { prop: "actionStartTime", label: "发起时间" },
          { prop: "userName", label: "带看经纪人" }
        ];
      } else if (this.behaviorType == "FAVORITE") {
        this.customerConfigs = [
          { slot: "opt", message: "message" },
          { prop: "actionName", label: "行为" },
          { prop: "serviceName", label: "楼盘" },
          { prop: "actionStartTime", label: "时间" }
        ];
      } else if (this.behaviorType == "point") {
        this.customerConfigs = [
          { slot: "opt", message: "message" },
          { prop: "behavior_name", label: "积分类型" },
          { prop: "behavior_name", label: "积分名称" },
          { prop: "balance_point", label: "积分" },
          { prop: "time", label: "时间", formatter: this.time }
        ];
        this.pointList();
        return;
      }
      this.behavior();
    },
    time(row) {
      return utils.getTimeString(row.time);
    },
    // 切换认证/银行卡信息
    attestation(tab) {
      this.form.type = tab.name;
      this.customerInfo();
    },
    detail() {
      let id = this.$route.query.id;
      this.axios
        .post(api.checkInfo, { id: id })
        .then(res => {
          if (res.data.code === 200) {
            this.info = res.data.data.info;
            this.invitationNum = res.data.data.num;
            this.blocInvitationNum = res.data.data.blocnum;
          }
          return res.data.data.info.userCode;
        })
        .then(data => {
          this.userCode = data;
          this.behavior();
        });
    },
    customerInfo() {
      this.form.id = this.$route.query.id;
      this.axios.post(api.checkInfoList, this.form).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data.list;
          if (res.data.data.identity) {
            this.identity = res.data.data.identity;
            this.bindingList = res.data.data.binding.list;
          }
          this.form.total = res.data.data.total;
        }
      });
    },
    behavior() {
      this.axios
        .post(
          `${api.behaviorList}${this.behaviorType}/${this.userCode}`,
          this.customerForm
        )
        .then(res => {
          if (res.data.code === 200) {
            this.customerData = res.data.data;
          }
        });
    }
  },
  created() {
    this.detail();
    this.customerInfo();
  }
};
</script>
<style lang="stylus" scoped>
.title {
  font-size: 18px;
  font-weight: bold;
}
.users {
  display: flex;
  font-size: 15px;
}
.left,
.right {
  width: 50%;
  line-height: 40px;
}
.left_item {
  display: flex;
}
.Avatar {
  align-items: center;
}
.left_item img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-left: 10px;
}
.subtitle p {
  font-weight: 600;
}
.subtitle ul li {
  line-height: 40px;
}
.tab-common > div.el-tabs__header {
  border-bottom: none;
}
.tab-common .el-tabs__nav {
  border: none !important;
}
.tab-common .el-tabs__item {
  background: #ccc;
  border-bottom: none;
  color: #2c3e50;
  margin-right: 20px;
}
.tab-common .el-tabs__item:hover {
  color: #2c3e50;
}
.tab-common .el-tabs__item.is-active {
  background-color: #409eff;
  color: #fff;
  border-bottom-color: transparent !important;
}
.tab-common .el-tabs__nav-wrap:after {
  background-color: transparent;
}
</style>